@import "./variables.less";

.veui-shadow(@type: normal, @color: #000) when (@type = normal) {
  box-shadow: 0 1px 2px fadeOut(@color, 80%);
}
.veui-shadow(strong, @color: #000) {
  box-shadow: 0 2px 4px fadeOut(@color, 80%);
}
.veui-shadow(extend, @color: #000) {
  box-shadow: 0 2px 4px fadeOut(@color, 90%);
}
.veui-shadow(drop, @color: #000) {
  box-shadow: 0 1px 5px fadeOut(@color, 80%);
}
.veui-shadow(glow, @color: #000) {
  box-shadow: 0 0 4px fadeOut(@color, 60%);
}
.veui-shadow(none) {
  box-shadow: none;
}

.veui-button-alt() {
  .veui-shadow();

  &:focus {
    color: @veui-theme-color-primary;
    .veui-shadow();
  }

  &:hover {
    background-color: @veui-gray-color-sup-4;
    border-color: @veui-gray-color-sup-4;
    color: @veui-text-color-strong;
    .veui-shadow();
  }

  &:active {
    border-color: @veui-gray-color-sup-2;
    background-color: @veui-gray-color-sup-2;
    .veui-shadow(none);
  }

  &:disabled,
  &.veui-disabled {
    background-color: @veui-gray-color-sup-3;
    color: @veui-text-color-weak;
    cursor: not-allowed;
    .veui-shadow(none);
  }
}

.veui-button-transition() {
  transition-property: border-color, background-color, color, box-shadow;
  transition-duration: .2s;
}

.position-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
